<template>
	<view class="leagueDetail">

		<view class="container">
			<view class="banner">
				<view class="swiper">
					<swiper circular :autoplay="true" :interval="2000" @change="comCurrent">
						<swiper-item v-for="(item,i) in leagueDetail.banner" :key="i">
							<image :src="item"></image>
						</swiper-item>
					</swiper>
					<view class="current">{{current}} / {{leagueDetail.banner.length}}</view>
				</view>
				<view class="info">
					<view class="name">
						<view class="tit">{{leagueDetail.title}}</view>
						<view class="price"><text>¥</text>{{leagueDetail.price}}</view>
					</view>
					<view class="down">
						<text v-for="(item,i) in leagueDetail.label" :key="i">{{item}}</text>
					</view>
				</view>
			</view>

			<view class="courseDetail">
				<view class="top">
					<image :src="leagueDetail.coachImg" class="head"></image>
					<text class="name">{{leagueDetail.coachName}}</text>
					<text class="level">{{leagueDetail.coachLevel}}</text>
				</view>
				<view class="down">
					<view class="detailTable">
						<view class="tr">
							<text class="tit">时间</text>
							<text>{{leagueDetail.time}}</text>
						</view>
						<view class="tr">
							<text class="tit">地点</text>
							<text>{{leagueDetail.address}}</text>
						</view>
						<view class="tr">
							<text class="tit">人数</text>
							<text>{{leagueDetail.count}}人（{{leagueDetail.reserved}}/{{leagueDetail.count}}）</text>
						</view>
					</view>
					<view class="navigation">
						<text @click="openMap">导航</text>
						<uni-icons type="right" size="12" color="#A4A4A4"></uni-icons>
					</view>
				</view>
			</view>

			<image src="https://cloudcdn.noitom.com.cn/noitom2/billiard/coursePic.png" class="coursePic"></image>
			<view class="rules">
				<view class="title">约课规则</view>
				<view class="h2">1.课表发布</view>
				<view class="cont">每周五22:00发布下周一至周日课表</view>
				<view class="h2">2.预约</view>
				<view class="cont">每天11:00开放2天后的课程预约</view>
				<view class="h2">3.取消预约</view>
				<view class="cont">
					<text>通过预约通道成功预订的课程：</text>
					<text>开课前大于2小时可免责取消，不满2小时无法取消。</text>
					<text>通过购买通道成功预订的课程：</text>
					<text>· 开课前2小时内无法取消课程。</text>
					<text>· 开课前>=2小时取消课程,取消可全额退款（7日内原支付通道返回）</text>
				</view>
				<view class="h2">4.官方取消</view>
				<view class="cont">
					<text>开课前2小时预约会员小于4人，后台系统可能会自动取消课程，请大家知悉，谢谢理解和配合。</text>
					<text>开课后到场人数≦3人，在征得您同意的情况下，教练可现场取消课程</text>
				</view>
			</view>
			<image src="https://cloudcdn.noitom.com.cn/noitom2/billiard/footer_pic.png" class="footer_pic"></image>
		</view>

		<view class="makePhoneBox">
			<button @click="createOrder">
				<text>立即预约 ¥{{leagueDetail.price}}</text>
			</button>
		</view>
	</view>
</template>

<script>
	import {
		getLeagueDetail
	} from "@/api/getData.js";
	export default {
		data() {
			return {
				href: 'https://uniapp.dcloud.io/component/README?id=uniui',
				leagueDetail: {
					cId: 0,
					imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/myIcon_h.png',
					name: '王教练',
					title: '10人小班基础指导',
					level: 1,
					price: 120,
					recommend: 1,
					banner: [{
							id: 0,
							imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/appointmentIcon.png'
						},
						{
							id: 0,
							imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/appointmentIcon.png'
						},
						{
							id: 0,
							imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/appointmentIcon.png'
						}
					],
					detailPic: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/myIcon_h.png',
					label: ['基础课', '标签1'],
					time: '9:00-16:00',
					address: 'xxxxxxxxxx'
				},
				current: 1,
				lId: null
			}
		},
		methods: {
			openMap() {
				var latitude = this.leagueDetail.latitude
				var longitude = this.leagueDetail.longitude
				var name = this.leagueDetail.address
				wx.openLocation({
					latitude,
					longitude,
					name,
					scale: 18
				})
			},
			//详情
			async getLeagueDetail() {
				const {
					data: res
				} = await getLeagueDetail(this.lId)
				console.log(res)
				this.leagueDetail = res.data
			},
			//教练等级转换
			conversion(num) {
				switch (num) {
					case 1:
						return '初级教练'
					case 2:
						return '中级教练'
					case 3:
						return '高级教练'

				}
			},
			//轮播图索引
			comCurrent(e) {
				this.current = e.detail.current + 1
			},
			createOrder() {
				uni.navigateTo({
					url: "/pages/pay/orderDetails?type=1&courseId="+this.lId+""
				});
			}
		},
		onLoad(options) {
			console.log(options)
			this.lId = options.lId
			this.getLeagueDetail()
		}
	}
</script>

<style lang="less">
	.leagueDetail {

		.container {
			padding: 32rpx;
		}

		.banner {
			height: 498rpx;
			background: #FFFFFF;
			border-radius: 16rpx;

			.swiper {
				height: 350rpx;
				position: relative;

				swiper {
					height: 100%;
				}

				image {
					display: block;
					width: 100%;
					height: 100%;
				}

				.current {
					width: 75rpx;
					height: 33rpx;
					background: rgba(0, 0, 0, 0.6);
					border-radius: 6rpx;
					right: 14rpx;
					bottom: 19rpx;
					position: absolute;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 33rpx;
					text-align: center;
				}
			}

			.info {
				padding: 26rpx 32rpx 0;
				line-height: 1;

				.name {
					font-weight: bold;
					display: flex;
					justify-content: space-between;

					.tit {
						width: 320rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 32rpx;
					}

					.price {
						color: #E60012;
						font-size: 36rpx;

						text {
							font-size: 20rpx;
							margin-right: 9rpx;
							font-weight: 400;
						}
					}
				}

				.down {
					margin-top: 27rpx;

					text {
						color: #A4A4A4;
						font-size: 24rpx;
						padding-right: 10rpx;
						margin-right: 10rpx;
						// border-right: 1px solid #A4A4A4;
						line-height: 1;
					}

					text:first-child {
						margin-left: 0;
					}
				}
			}
		}

		.courseDetail {
			padding: 32rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 32rpx;

			.top {
				display: flex;
				align-items: center;

				.head {
					width: 82rpx;
					height: 82rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 15rpx;
				}

				.name {
					font-size: 32rpx;
					margin-right: 18rpx;
				}

				.level {
					width: 105rpx;
					height: 34rpx;
					background: rgba(230, 0, 18, 0.1);
					border-radius: 8rpx;
					font-size: 20rpx;
					color: #E60012;
					text-align: center;
					line-height: 34rpx;
				}
			}

			.down {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #A4A4A4;
				font-size: 24rpx;

				.detailTable {
					line-height: 1;

					.tr {
						margin-top: 32rpx;
						font-size: 24rpx;

						.tit {
							font-weight: bold;
							width: 76rpx;
							display: inline-block;
						}
					}
				}
			}
		}

		.rules {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 32rpx;
			line-height: 1;
			margin-top: 32rpx;

			.title {
				font-size: 36rpx;
			}

			.h2 {
				font-size: 24rpx;
				font-weight: bold;
				margin-top: 32rpx;
			}

			.cont {
				font-size: 24rpx;
				color: #A4A4A4;
				margin-top: 16rpx;

				text {
					display: block;
					line-height: 36rpx;
				}
			}
		}

		.coursePic {
			display: block;
			width: 100%;
			margin: 32rpx 0;
			height: 1270rpx;
		}

		.footer_pic {
			display: block;
			width: 251rpx;
			height: 25rpx;
			margin: 32rpx auto 0;
		}

		.makePhoneBox {
			height: 120rpx;
			background: #FFFFFF;
			overflow: hidden;

			button {
				width: 686rpx;
				height: 98rpx;
				background: #E60012;
				border-radius: 49rpx;
				padding: 0;
				line-height: 98rpx;
				display: flex;
				margin: 11rpx auto;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}
</style>
